<template>
<u-calendar v-model="show" :mode="mode"></u-calendar>
	<view class="hospitalBox">
		<view class="bgimages">
			<image src="https://static.med.gzhc365.com/fss/publicfile/747b80cb436e2bdd043d5531cb9d87c162fb6afced0efbcefe2027ef9673cc13.png" mode=""></image>
		</view>
		<view class="hospital-main">
			<view class="hospital-main-top">
				<view class="main-titl-img">
					<image :src="hospitalany[0].logoUrl" mode=""></image>
					<view class="main-titl">
						<view class="hos-tltle">
							{{hospitalany[0].name}}
						</view>
						<view class="hos-minitit">
							{{hospitalany[0].levelName}}
						</view>
					</view>
				</view>
				<view class="hos-phone">
					咨询电话：{{hospitalany[0].telNo}}
				</view>
				<view class="hos-ip">
					{{hospitalany[0].address}}
				</view>
			</view>
			<!-- 常用功能 -->
			<view class="common">
				<view class="common-tit">
					常用功能
				</view>
				<view class="com-item-fix">
					<view class="common-item" @click="tomap">
						<view class="common-item-img">
							<image src="../../static/dd6d2c627bba23c58e11383e95d7f37.png" mode=""></image>
						</view>
						<text>来院导航</text>

					</view>
					<view class="common-item" @click="tophospitalnews">
						<view class="common-item-img">
							<image src="../../static/e2be294e3fdf9771faa5d98203face0.png" mode=""></image>
						</view>
						<text>医院动态</text>

					</view>
					<view class="common-item" @tap="tocomplex">
						<view class="common-item-img">
							<image src="../../static/c804e180e2cba124674796a0c6cb08c.png" mode=""></image>
						</view>
						<text>楼群分布</text>

					</view>
					<view class="common-item" @click="toDepartmentClassification">
						<view class="common-item-img">
							<image src="../../static/b02b740beba91f0151daf6697aecde4.png" mode=""></image>
						</view>
						<text>科室分布</text>

					</view>
				</view>


			</view>

			<!-- 科室介绍 -->
			<view class="common">
				<view class="common-tit">
					科室介绍
				</view>
				<view class="com-item-fix">
					<view class="common-item" v-for="common in administrativeOffice" key="common.deptId">
						<view class="common-item-img">
							<image :src="common.deptImg" mode=""></image>
						</view>
						<text>{{common.deptName}}</text>

					</view>
				
				</view>


			</view>
			<!-- 医院介绍 -->
			<view class="hospital-introduce" v-for="(item,index) in hospitalany" key="index">
				<view class="hospital-introduce-tit">
					{{item.name}}
				</view>
				<view class="hospital-introduce-main">
					<view class="hospital-introduce-phone"><text>{{item.telNo}}</text> <text>拨打电话</text></view>
					<view class="hospital-introduce-ip"><text>{{item.address}}</text> <text>查看导航</text></view>
					<view class="">
						<!-- 1.布局 文章收起与全文 -->
						<text class="article_content" v-html="tempContent"></text>
						<view class="intro_toggle" v-if="tempContent!== tempContent.length > 780">
							<text class="quanwen" v-if="isshowAllContent" @click="toggleDescription(index)">
								查看更多


							</text>
							<text class="quanwen" v-else @click="toggleDescription(index)">
								收起
							</text>
						</view>
					</view>
				</view>
			</view>

			<view style="height: 80px;">
			</view>
		</view>
	</view>
</template>

<script>
	import {hospital,keshi}  from "./hospital.js"
	export default {
		data() {
			return {
				isshowAllContent: false,
				txt_content: '',
				tempContent: '',
				hospitalany:"",//医院
				
				administrativeOffice:""///科室


			}
		},
		onLoad() {	
			console.log(hospital.data);
			console.log(keshi.data.slice(0,4));
			this.hospitalany=hospital.data.slice(0,1)
			console.log(this.hospitalany);
			this.administrativeOffice=keshi.data.slice(0,4)
			//3.进入页面处理 (展开收起) 数据·
			var that = this
			var txtCntIndex = that.hospitalany[0].introduction.length
			if (txtCntIndex > 52) {
				that.isshowAllContent= true
				that.tempContent = that.hospitalany[0].introduction.substr(0, 780)
				console.log(that.tempContent);
			} else {
				that.isshowAllContent = false
				that.tempContent = that.hospitalany[0].introduction
			}
			
			
			
		
		},
		methods: {
			// 	// 4.点击 展开与收起，处理文本
			toggleDescription: function(index) {
				console.log(index);
				var that = this
				if (that.isshowAllContent) {
					that.isshowAllContent = false
					that.tempContent = that.hospitalany[0].introduction
				} else {
					that.isshowAllContent = true
					that.tempContent = that.hospitalany[0].introduction.substring(0, 780)
				}
			},
			tocomplex:function(){
				uni.navigateTo({
					url: '../../pages/complex/complex'
				});
			},
			tophospitalnews(){
				// console.log(111);
				uni.navigateTo({
					url: '../../pages/HospitalNews/HospitalNews'
				});
				
			},
			toDepartmentClassification(){
				uni.navigateTo({
					url: '../../pages/DepartmentClassification/DepartmentClassification'
				});
			},
			tomap(){
				uni.navigateTo({
					url: '../../pages/map/map'
				});
			}


		},

	}
</script>

<style lang="scss">
	.hospitalBox {
		width: 100%;
		background-color: #f6f7f9;

		.bgimages {
			width: 100%;
			height: 240px;
			position: fixed;
			z-index: 99;

			image {
				width: 100%;
				height: 240px;

			}
		}

		.hospital-main {
			// height: 800px;
			background-color: #f6f7f9;
			position: absolute;
			top: 210px;
			border-radius: 15px 15px 0 0;
			padding: 28px 15px;
			box-sizing: border-box;
			width: 100%;
			z-index: 100;

			.hospital-main-top {
				// background-color: #fff;
				box-sizing: border-box;
				width: 100%;

				.main-titl-img {
					display: flex;

					.main-titl {
						margin-left: 20px;

						.hos-tltle {
							font-size: 26px;
							font-weight: 600;
						}

						.hos-minitit {
							height: 22px;
							line-height: 22px;
							border-radius: 55555px;
							width: 50px;
							padding: 1px 8px;
							background-color: #e0f3f1;
							color: #7fd2c1;
							// opacity: .5;
							margin-top: 10px;
							font-size: 10px;
						}
					}

					image {
						width: 65px;
						height: 65px;
						border-radius: 50%;

					}
				}

				.hos-phone {
					margin-top: 17px;
					font-size: 12px;
					color: #9fa0a2;
				}

				.hos-ip {
					font-size: 12px;
					margin-top: 10rpx;
					color: #9fa0a2;

				}
			}

			.common {
				width: 100%;
				margin-top: 20px;
				border-radius: 5px;
				background-color: #fff;

				.common-tit {
					font-size: 18px;
					padding: 16px 0 20px 14px;

				}

				.com-item-fix {
					display: flex;
					justify-content: space-between;

					.common-item {
						width: 20%;
						margin-bottom: 16px;

						.common-item-img {
							width: 40px;
							height: 40px;
							text-align: center;
							margin: 0 auto;

							image {
								width: 100%;
								height: 100%;
								text-align: center;
								// border-radius: 50%;
							}

						}

						text {
							text-align: center;
							font-size: 12px;
							margin-top: 3px;
							display: block;
							color: #808080;
						}
					}
				}


			}
		}

		.hospital-introduce {
			margin-top: 16px;
			background-color: #ffffff;
			border-radius: 8px;
			padding: 12px;

			.hospital-introduce-tit {
				padding: 16px 0 20px 0;
				font-size: 19px;
				font-weight: 600;


			}

			.hospital-introduce-main {
				font-size: 12px;

				.hospital-introduce-phone {
					display: flex;
					justify-content: space-between;

					&>text:nth-child(2) {
						color: #2367c7;
					}
				}

				.hospital-introduce-ip {
					display: flex;
					justify-content: space-between;
					margin-top: 12px;
					margin-bottom: 12px;

					&>text:nth-child(2) {
						color: #2367c7;
					}
				}

				.quanwen {

					display: block;
					width: 100%;
					box-sizing: border-box;
					text-align: center;

					color: #2367c7;
				}
			}
		}
	}
	::v-deep .MsoNormal{
		font-size: 14px !important;
	}
	::v-deep strong>span{
		font-size: 16px !important;
	}
</style>